<template>
    <div
        :class="{'navSelect':true,'navCenter':navShow, 'navSelected':judgePage}"
        @click="routToPage"
    >
        <slot name="iconSelect"></slot>
        <text :class="{'navText':navShow}">{{navShow ? navTitle : ''}}</text>
    </div>
  </template>

<script setup>
import { useRouter,useRoute } from 'vue-router'
import { defineProps, ref, toRefs, computed,watch } from 'vue';

const router = useRouter();
const route = useRoute();
const props = defineProps({
    navTitle:String,
    routerTo:String,
    isShow:Boolean
});
const navShow = ref(false);
watch(() => props.isShow, (newVal) => {
  if (newVal) {
    setTimeout(() => {
        if(props.isShow){
            navShow.value = true;
        }
    }, 200);
  } else {
    navShow.value = false;
  }
});

const {  navTitle,routerTo,isShow  } = toRefs(props);

function routToPage(){
    router.push({ name: routerTo.value });
}
const judgePage = computed(() =>{
    if(routerTo.value === 'home' && route.path === '/' ){
        return true;
    }else return routerTo.value === route.path.replace('\/', '');
})
</script>

<style scoped>
.navSelect{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.4s ease-in-out;
}
.navSelect:hover{
    background-color: #d9ecff;
    transform: scale(1.05);
}

.navCenter{
    padding-left: 1.5vh;
    justify-content: flex-start;
}
.navSelected{
    background-color: #d9ecff;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.navText{
    margin-left: 0.5vh;
}
</style>
